/**tabla de cabecera que contiene el logo, titulo y las opciones de usuario**/
/**se tiene configurado como flex**/
.tablaHeader{
    justify-content: space-between;
    align-items: center;
}

/** QUITAR EL MARGEN INFERIOR QUE SE COLOCA GENEXUS EN EL LOGO PRINCIPAL DE GTO **/
.tablaHeader .form-group{
    margin-bottom: 0px !important;
}
/**tablaHeader tiene dos contenedores, tambien FLEX que ocupara el mismo ancho **/
.tablaHeader .bloqueIzquierdoTablaHeader,
.tablaHeader .bloqueDerechoTablaHeader
{
   width: 50%;
   align-items: center;
}
.bloqueDerechoTablaHeader .TextBlock{
    padding: 1%;
} 
.bloqueDerechoTablaHeader{
    justify-content: end;
}

/**acomodar el texto en cabecera Expedientes */
.LblTitBlanco2{
    align-items: center; 
    display: flex !important;
}

/**Estilo a la imagen de usuario**/
.bloqueDerechoTablaHeader img:first{ 
    border: solid .5px #6d6d6d;
    border-radius: 20px;
    cursor: pointer;
}

/**estilos del menu flotante de usuario**/
.TablaMenuFlotante>tbody>tr:first-child>td{
    border-left: solid .5px #acacac;
    border-right: solid .5px #acacac; 
    border-bottom: solid .5px #acacac;
}

.tablaHeaderMenuFlotante.menuActivo .TablaMenuFlotante{
    border: #252525 1px solid; 
}
.imgMenuActivo{
    border: #252525 1px solid; 
    border-radius: 20px;
}

.tablaHeaderMenuFlotante{ 
    background-color: #f3000000; 
    /* justify-content: end;
    align-items: self-end; */
    /*top: 36px;
    height: 150px; GENEXUS*/
} 

/**MOSTRAR EL MENU FLOTANTE CON EL HOVER EN LA TABLA PRINCIPAL**/
.tablaHeaderMenuFlotanteHover:hover .tablaHeaderMenuFlotante{
    display: block !important;
}
/**MOSTRAR EL MENU FLOTANTE CON EL HOVER EN SI MISMO**/
.tablaHeaderMenuFlotante:hover{
    display: block !important;
}
.TablaMenuFlotante .fondoAzul a{
    color: #fff !important;
}
.BarraAccesibilidad div{
    text-align: left;
}

@media(max-width: 1015px){
    
    .bloqueDerechoTablaHeader{
        justify-content: space-around;
    }
    /**TABLA CONTIENE DOS COMPONENTES: MENU Y CONTENIDO; TIENE VERSION MOBILE; EL FLEX ES POR GENEXUS**/
    .tablaPrincipal{
        flex-direction:column;
        background-size: cover;
        flex-wrap: wrap !important; 
    }
    #Grid1ContainerDiv{
        width: 98vw;
        padding: 0 2%;
        overflow: scroll;
    }
    .tblMenIzq,.tblMenIzqDes{
        padding: 0px 10px 0px 5px;
    }
    .tblMenIzqOculto{
        display: none !important;
    }
}
/*@keyframes loading{
    0% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.Cargando{
    border: 6px dotted var(--color-primary);
    border-radius: 100%;
    width: 50px;
    height: 50px;
    animation: loading 2s infinite linear;
}
*/
@keyframes preloader_2_1 {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        border-radius: 0px;
    }

    50% {
        transform: translateX(-20px) translateY(-10px) rotate(-180deg);
        border-radius: 20px;
        background: #00a4ef;
    }

    80% {
        transform: translateX(0px) translateY(0px) rotate(-360deg);
        border-radius: 0px;
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(-360deg);
        border-radius: 0px;
    }
}

@keyframes preloader_2_2 {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        border-radius: 0px;
    }

    50% {
        transform: translateX(20px) translateY(-10px) rotate(180deg);
        border-radius: 20px;
        background: #ffb900;
    }

    80% {
        transform: translateX(0px) translateY(0px) rotate(360deg);
        border-radius: 0px;
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(360deg);
        border-radius: 0px;
    }
}

@keyframes preloader_2_3 {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        border-radius: 0px;
    }

    50% {
        transform: translateX(-20px) translateY(10px) rotate(-180deg);
        border-radius: 20px;
        background: #e74c3c;
    }

    80% {
        transform: translateX(0px) translateY(0px) rotate(-360deg);
        border-radius: 0px;
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(-360deg);
        border-radius: 0px;
    }
}

@keyframes preloader_2_4 {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        border-radius: 0px;
    }

    50% {
        transform: translateX(20px) translateY(10px) rotate(180deg);
        border-radius: 20px;
        background: #7fba00;
    }

    80% {
        transform: translateX(0px) translateY(0px) rotate(360deg);
        border-radius: 0px;
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(360deg);
        border-radius: 0px;
    }
}

.Cargando {
    position: relative;
    left: 50%;
    width: 40px;
    height: 40px;
}
.Cargando1 {
    bottom: 0px;
    width: 20px;
    height: 20px;
    display: block;
    background: #9b59b6;
    position: absolute;
    animation: preloader_2_1 1.5s infinite ease-in-out;
}

.Cargando2 {
    bottom: 0px;
    width: 20px;
    height: 20px;
    display: block;
    background: #9b59b6;
    position: absolute;
    left: 20px;
    animation: preloader_2_2 1.5s infinite ease-in-out;
}

.Cargando3 {
    bottom: 0px;
    width: 20px;
    height: 20px;
    display: block;
    background: #9b59b6;
    position: absolute;
    top: 0px;
    animation: preloader_2_3 1.5s infinite ease-in-out;
}

.Cargando4 {
    bottom: 0px;
    width: 20px;
    height: 20px;
    display: block;
    background: #9b59b6;
    position: absolute;
    top: 0px;
    left: 20px;
    animation: preloader_2_4 1.5s infinite ease-in-out;
}

.CampoObligatorio {
	font-family: Verdana, Arial;
    font-size: 9.75pt;
    color: #000;
	width: 100%;
}
 
.CampoObligatorio::before {
	content: "*";
	color: #E26596;
	margin: 5px;
}

.PlecaAlumno:hover .PlecaAlumnoInfo{

	margin-left: 0px;

    margin-top: 0px;

	width: 100%;

	height: 120px;

}
 
.PlecaAlumno:hover{

	width: 100%;

	height: 120px;

	z-index: 1;

}
 
.PlecaAlumno:hover .ImagePlecaAlumno{

	width: 120px; 

	height: 120px;

}
 
 
 
 
 
.MarginBottom0 .form-group{
	margin-bottom: 0px !important;
}


/* Estilos para Resultados RIMA */

/* Estilos comunes del pseudo-elemento */
.GraficaRimaBineta tr::before {
  content: "●";
  font-size: 15px;
  display: table-cell;
  vertical-align: middle;
}

/* Solo el color cambia */
.GraficaRimaBineta tr:nth-child(1)::before { color: #8bc7f7; }
.GraficaRimaBineta tr:nth-child(2)::before { color: #46b3f3; }
.GraficaRimaBineta tr:nth-child(3)::before { color: #009fef; }
.GraficaRimaBineta tr:nth-child(4)::before { color: #008cee; }